<template>
	<view class="idea" >
	   <view class="idea-a back">
	   	 <text>您的称呼</text>
		 <!-- <text style="padding-left: 64rpx;" class="idea-m">{{item.cell}}</text> -->
		 <input type="text" v-model="cell" placeholder="请输入您的名字" />
	   </view>
	   <view class="xianduan"></view>
	   <view class="idea-b back">
	   	 <text>电子邮箱</text>
		  <input type="text" v-model="mail" placeholder="如: XXX@qq.com"  />
	   </view>
	   <view class="xianduan"></view>
	   <view class="idea-c back">
	   	  <text>您的意见</text>
		  <textarea class="input idea-m" v-model="ideaText" placeholder="请在此处写下您对我们的宝贵意见和建议" rows="1" ref="address"></textarea>
	   </view>
	   <view class="xianduan"></view>
	   <view class="idea-tijiao" @click="confirmCommit">
	   	  <text>确认提交</text>
	   </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				cell: '',
				mail: '',  //邮箱
				ideaText: '', //您的意见
			}
		},
		onLoad() {
			
		},
		methods: {
			//确认提交
			confirmCommit() {
				if(this.cell && this.mail && this.ideaText) {
					let params = {
						call: this.cell,
						youxiang: this.mail,
						opinion: this.ideaText
					};
					this.$post(this.api.feedback, params).then((res) => {
						console.log(res);
						uni.showToast({title: '提交成功',icon: 'success', mask:true});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack(1)
						},2500)
					}).catch((err) =>{
						console.log(err)
					})
				}else {
					uni.showToast({title: '请完整填写信息',icon: 'error', mask:true});
					setTimeout(() => {
						uni.hideToast();
						},2500)
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.idea{
		background-color:#FFFFFF ;
	}
	.back{
		background-color: #ffffff;
	    height: 87rpx;
	}
	.xianduan{
		width: 750rpx;
		height: 2rpx;
		background: #E5E5E5;
		position: absolute;
		margin-top: 30rpx;
	}
	.idea-a{
		width: 750rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
		line-height: 41rpx;
		padding-top: 29rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		input{
			margin-left: 60rpx;
			color: #999;
		}
		input::-webkit-input-placeholder{
			color: #999
		}
		input::-moz-placeholder{ /* Mozilla Firefox 19+ */
			color: #999
		}
		input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
			color: #999
		}
		input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
			color: #999
		}
	}
	.idea-b{
		width: 750rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
		line-height: 41rpx;
		padding-top: 60rpx;
		padding-left: 30rpx;
	}
	.idea-c{
		width: 750rpx;
		height: 100rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
		line-height: 41rpx;
		padding-top: 100rpx;
		padding-left: 30rpx;
	}
	.idea-font{
		width: 256rpx;
		height: 33rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 41rpx;
        padding-left: 62rpx;  
	}
	
	.idea-m{
		font-size: 30rpx;
	}
	.input {
		width: 490rpx;
		height: 150rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A5A5A5;
		position: absolute;
		margin-left: 195rpx;
		margin-top: -70rpx;
	}
	.idea-tijiao{
		width: 700rpx;
		height: 100rpx;
		background: #5696F8;
		border-radius: 10rpx;
		display: block;
		margin: 0 auto;
		margin-top: 57rpx;
	}
	.idea-tijiao text{
		display: block;
		height: 34rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		color: #FFFFFF;
	}
	.idea-b input{
		position: absolute;
		margin-left: 195rpx;
		margin-top: -40rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 41rpx;
	}
</style>
